<template>
  <a-card title="修改密码">
    <a-form ref="formRef" :label-col="{span: 4}"
            :model="formState"
            :rules="rules"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed">
      <a-form-item :wrapper-col="{ span: 5 }" label="原密码" name="oldPassword">
        <a-input-password v-model:value="formState.oldPassword" :visibilityToggle="false"></a-input-password>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 5 }" has-feedback label="新密码" name="newPassword">
        <a-input-password v-model:value="formState.newPassword" :visibilityToggle="false"></a-input-password>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 5 }" has-feedback label="确认新密码" name="checkPass">
        <a-input-password v-model:value="formState.checkPass" :visibilityToggle="false"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button html-type="submit" type="primary">确认修改</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { Button, Card, Form, Input, message } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import { updatePassword } from '@/api/user'

const defaultFormState = {
  oldPassword: '',
  newPassword: '',
  checkPass: '',
}
export default {
  name: 'index',
  components: {
    ACard: Card,
    AInputPassword: Input.Password,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
  },
  setup () {
    const formRef = ref()
    let validatePass = async (rule, value) => {
      if (value === '') {
        return Promise.reject('请输入密码')
      } else {
        if (formState.checkPass !== '') {
          formRef.value.validateField('checkPass')
        }

        return Promise.resolve()
      }
    }

    let validatePass2 = async (rule, value) => {
      if (value === '') {
        return Promise.reject('请再次输入密码')
      } else if (value !== formState.newPassword) {
        return Promise.reject('两次输入的密码不一致！')
      } else {
        return Promise.resolve()
      }
    }
    const rules = {
      oldPassword: [
        {
          required: true,
          message: '请输入旧密码',
          trigger: 'blur',
        },
      ],
      newPassword: [
        {
          validator: validatePass,
          trigger: 'change',
        },
      ],
      checkPass: [
        {
          validator: validatePass2,
          trigger: 'blur',
        },
      ],
    }
    const formState = reactive({
      oldPassword: '',
      newPassword: '',
      checkPass: '',
    })
    const resetForm = () => {
      formRef.value.resetFields()
    }
    const handleFinish = async values => {
      console.log(values, formState)
      await updatePassword(formState.oldPassword, formState.newPassword)
        .then(res => message.success(res.msg))
      resetForm()
    }

    const handleFinishFailed = errors => {
      console.log(errors)
    }
    return {
      formRef,
      rules,
      formState,
      resetForm,
      handleFinish,
      handleFinishFailed,
    }
  },
}
</script>

<style scoped>

</style>
